<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <title th:text="${companyProfile.name}"></title>
    <meta name="keywords" th:content="${companyProfile.seoKeyword}"/>
    <meta name="description" th:content="${companyProfile.seoDescription}"/>
    <meta name="baidu-site-verification" content="code-u66UtDIGVN" />
    <link rel="Shortcut Icon" href="/favicon.ico"/>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="./static/css/animate.css">
    <link rel="stylesheet" href="/static/iconfont/iconfont.css">
    <link rel="stylesheet" href="./static/css/jquery.fullPage.css">
    <link rel="stylesheet" href="./static/css/swiper-3.4.2.min.css">
    <link rel="stylesheet" href="./static/css/css.css">
    <link rel="stylesheet" href="./static/css/index.css">
    <style>
        .vbg {
            opacity: 1;
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: url() no-repeat center center / cover;
            z-index: 999;
            animation-duration: 800ms;
            pointer-events: none;
        }
    </style>
</head>
<body data-ind="0" ontouchstart="">
<style>
    table {
        margin: 0px auto;
    }
    @media (max-width: 768px) {
        body {
            padding-top: 60px !important;
        }
    }
    @media (min-width: 992px) {
        .header-code-text-pc {
            color: #fff !important;
        }
    }
</style>
<!--#include file="/public/html/header.html"-->
<div th:replace="header :: header"></div>

<div class="leg"></div>
<div class="wow fadeOut vbg" data-wow-delay="1000ms"></div>
<div id="fullpage" style="opacity:0">
    <div class="ind_a section">
        <div class="swiper-container" id="bannerSwiper" style="width:100%;height:100%;">
            <div class="swiper-wrapper" th:if="${screen1Image != null && !screen1Image.isEmpty()}">
                <div class="swiper-slide" th:each="s: ${screen1Image}">
                    <img th:src="${s.url}" alt="" style="height:100%;width:100%;">
                </div>
            </div>
        </div>
        <img th:src="@{${session.lang == 'en' ? '/uploads/nrd/static/pic_01_en.png' : '/uploads/nrd/static/pic_01.png'}}" alt="" class="fixed-banner-img">
        <div class="indiv indiv-img" th:if="${screen1Link != null && !screen1Link.isEmpty()}">
            <div class="custom-btn-box">
                <a th:each="s: ${screen1Link}" th:href="${s.url}" rel="noopener noreferrer" class="btn lt-btn"><i th:class="${session.lang == 'en' ? s.descriptionEn : s.description}"></i><th:block th:text="${session.lang == 'en' ? s.titleEn : s.title}"></th:block> </a>
            </div>
        </div>
    </div>
    <div class="ind_b section" th:if="${screen2 != null}" th:style="'background: url(' + ${screen2.imageUrl} + ') no-repeat center center / cover;'">
        <div class="wrap">
            <div class="indiv">
                <div class="title" th:utext="${session.lang == 'en' ? screen2.titleEn : screen2.title}"></div>
                <div class="text" th:utext="${session.lang == 'en' ? screen2.descriptionEn : screen2.description}"></div>
                <div class="btn-box" th:if="${screen2Link != null && !screen2Link.isEmpty()}">
                    <a th:each="s: ${screen2Link}" th:href="${s.url}" rel="noopener noreferrer" class="btn rt-btn zx"><th:block th:text="${session.lang == 'en' ? s.titleEn : s.title}"></th:block></a>
                </div>
            </div>
        </div>
    </div>
    <div class="ind_c ind_e section" th:if="${screen3 != null}" th:style="'background: url(' + ${screen3.imageUrl} + ') no-repeat center center / cover;'">
        <div class="wrap footer-wrap">
            <div class="indiv">
                <div class="title" th:utext="${session.lang == 'en' ? screen3.titleEn : screen3.title}"></div>
                <div class="text" style="width:50%;margin:0 auto;" th:utext="${session.lang == 'en' ? screen3.descriptionEn : screen3.description}"></div>
                <div class="arrow">
                    <img src="/static/image/home/down-arrow.png" alt="">
                </div>
                <div class="swiper-box">
                    <div class="btn prev_news">
                        <img src="/static/picture/prev_jt_01.png" alt="">
                    </div>
                    <div class="btn next_news">
                        <img src="/static/picture/next_jt_01.png" alt="">
                    </div>
                    <div class="swiper-container" id="news" th:if="${video != null && !video.isEmpty()}">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide hoverbtn" th:each="v: ${video}">
                                <iframe style="display:block;width:100%;height:100%;" frameborder="0" th:src="${v.videoUrl}" referrerpolicy="unsafe-url" allowfullscreen></iframe>
                            </div>

                        </div>
                    </div>
                    <div class="swiper-pagination mobanner" id="newsSP"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="ind_d section" th:if="${screen4 != null}" th:style="'background: url(' + ${screen4.imageUrl} + ') no-repeat center center / cover;'">
        <div class="wrap footer-wrap">
            <div class="indiv">
                <div class="title black-color" th:utext="${session.lang == 'en' ? screen4.titleEn : screen4.title}">产品中心</div>
                <div class="produt-img">
                    <img th:src="@{${session.lang == 'en' ? '/static/image/home/product-img-en.png' : '/static/image/home/product-img.png'}}" alt="">
                </div>
                <div class="text black-color" th:utext="${session.lang == 'en' ? screen4.descriptionEn : screen4.description}">
                </div>
                <div class="btn-box" th:if="${screen4Link != null && !screen4Link.isEmpty()}">
                    <a th:each="s: ${screen4Link}" th:href="${s.url}" rel="noopener noreferrer" class="btn rt-btn zx" th:text="${session.lang == 'en' ? s.titleEn : s.title}">自动行走坡口机</a>
                </div>
            </div>
            <a th:each="s, status: ${screen4ProduceImage}" th:href="${s.url}" th:class="'pro-0' + ${status.index + 1} + ' pro-img'">
                <img th:src="${s.imageUrl}" alt="">
            </a>

        </div>
    </div>
    <div class="ind_d section ind_d-logo" th:if="${screen5 != null}" th:style="'background: url(' + ${screen5.imageUrl} + ') no-repeat center center / cover;'">
        <div class="wrap">
            <div class="indivs">
                <div class="title" th:utext="${session.lang == 'en' ? screen5.titleEn : screen5.title}">合作客户</div>
                <div class="te" th:utext="${session.lang == 'en' ? screen5.descriptionEn : screen5.description}">科学工艺流程控制和严格质量检测，为客户创造实在并且持久的价值</div>
                <div class="swiper-box clearfix" th:if="${coperativeCustomers != null && !coperativeCustomers.isEmpty()}">
                    <div class="sbox">
                        <div class="swiper-container" id="partnerSwiper">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide" th:each="c: ${coperativeCustomers}">
                                    <img th:src="${c.logo}" th:alt="${c.name}">
                                </div>

                            </div>
                        </div>
                        <div class="control-box">
                            <div class="box clearfix">
                                <div class="btn prev_partnerSwiper">
                                    <img src="./static/picture/prev_jt_01.png" alt="">
                                </div>
                                <div class="btn next_partnerSwiper">
                                    <img src="./static/picture/next_jt_01.png" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--#include file="/public/html/footer.html"-->
    <div th:replace="footer :: footer"></div>

</div>

</body>
<script src="./static/js/swiper-3.4.2.min.js"></script>
<script src="./static/js/jquery-1.11.3.min.js"></script>
<script src="./static/js/jquery.fullPage.min.js"></script>
<script src="./static/js/wow.min.js"></script>
<script src="/static/js/common.js"></script>
<script>
    $(function () {
        if (winW() > 768) {
            creatFullPage()
            // var tm = null;
            // var vid = document.getElementsByTagName("video")[0];
            // vid.addEventListener("play", function () {
            //   clearInterval(tm);
            // })
            tm = setInterval(function () {
                var footerh = $('footer').css('height')
                $('#footer').css('height', footerh)
                // vid.play();
            }, 400)

        }
        setTimeout(function () {
            $("#fullpage").css("opacity", 1)

        }, 400)

        calcInd_width();

        var bannerSwiper = creatSwiper("#bannerSwiper", {
            slidesPerView: 1,
            autoplay: 5000
        })
        var partnerSwipers = creatSwiper("#partnerSwiper", {
            slidesPerView: 4,
            slidesPerColumn: 3,
            spaceBetween: 50,
            breakpoints: {
                1366: {
                    spaceBetween: 25
                },
                768: {
                    slidesPerView: 2,
                    slidesPerGroup: 2,
                    slidesPerColumn: 3,
                    spaceBetween: 20
                }
            }
        })
        var news = creatSwiper("#news", {
            slidesPerView: 3,
            slidesPerGroup: 3,
            spaceBetween: 25,
            //autoplay: 6000,
            breakpoints: {
                768: {
                    slidesPerView: 1,
                    slidesPerGroup: 1
                }
            }
        })
        hidden()
    })
    var bl = 1920 / 950;

    function calcInd_width() {
        $(".ind_d .bgimg").css("width", $(".ind_d .bgimg .bg").width() + 'px');
        // 宽度:100%;height:auto;
        if (window.innerWidth / window.innerHeight > bl) {
            $(".ind_d .bgimg").addClass('bl1');
            $(".ind_d .bgimg").css("height", (window.innerWidth / bl) + 'px');
        } else {
            $(".ind_d .bgimg").addClass('bl2');
            $(".ind_d .bgimg").css("width", (window.innerHeight * bl) + 'px');
        }
    }

    //设置高度
    setTimeout(function() {
        var _width = parseInt( $('#news .swiper-wrapper .swiper-slide').eq(0).css('width') )
        $('#news .swiper-wrapper').css('height',_width *9 /16 +'px' )
    },500)
</script>
</html>